import type { FacilityStatus, MetroDetail } from "@dci/core";
import { ExternalLink } from "lucide-react";
import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { Breadcrumbs } from "@/components/entity/breadcrumbs";
import { EntityMap } from "@/components/entity/entity-map";
import { JsonLd } from "@/components/entity/json-ld";
import { fPageHref, PagedFacilities, parseFPage } from "@/components/entity/paged-facilities";
import { SectionNav } from "@/components/entity/section-nav";
import { SourcesFooter } from "@/components/entity/sources-footer";
import { EventList } from "@/components/event-list";
import { ClaimsTable } from "@/components/evidence";
import { FacilityTable } from "@/components/facility-table";
import { MarketConcentrationPanel } from "@/components/intelligence/market/concentration";
import { MarketMomentumPanel } from "@/components/intelligence/market/momentum";
import { OpeningTimeline } from "@/components/intelligence/market/opening-timeline";
import { ApiNote, CoverageBar, CoverageStrip, GridConstraintList, HonestEmpty, PillLink, PipelineBars, PublishedOnlyNote, ShareList } from "@/components/intelligence/shared";
import { WatchButton } from "@/components/intelligence/watch-button";
import { ProjectList } from "@/components/project-list";
import { Badge, EstimateMark } from "@/components/ui/badge";
import { Page, Section } from "@/components/ui/card";
import { StackedBar } from "@/components/ui/charts";
import { CountryFlag } from "@/components/ui/country-flag";
import { Metric, MetricCell, MetricRow } from "@/components/ui/metric";
import { ErrorState, OfflineNotice } from "@/components/ui/states";
import { RowLink, TBody, THead, Table, Td, Th, Tr } from "@/components/ui/table";
import type { DetailFacilitiesMeta } from "@/lib/dto";
import { fmtDate, fmtInt, fmtMw, fmtPct, pluralize, splitMw } from "@/lib/format";
import { routes } from "@/lib/routes";
import { compactJsonLd, NOT_FOUND_METADATA, pageMetadata } from "@/lib/seo";
import type { SearchParams } from "@/lib/sort";
import { countryHref, countrySlugMap, pipelineMw } from "../country-links";
import { getMetro } from "./data";
import { GrowthChart } from "./growth-chart";

export const revalidate = 300;

type Props = { params: Promise<{ slug: string }>; searchParams: Promise<SearchParams> };

function describe(m: MetroDetail): string {
  const parts = [`${fmtInt(m.facilityCount)} data center ${m.facilityCount === 1 ? "facility" : "facilities"} in ${m.name}${m.countryName ? `, ${m.countryName}` : ""}`];
  if (m.knownMw !== null) parts.push(`${fmtMw(m.knownMw)} known operational capacity (${fmtPct(m.mwCoverage)} of facilities publish a figure)`);
  const pipe = pipelineMw(m);
  if (pipe !== null) parts.push(`${fmtMw(pipe)} in the pipeline`);
  parts.push(`${fmtInt(m.operatorCount)} operators`);
  if (m.cloudRegionCount) parts.push(`${fmtInt(m.cloudRegionCount)} cloud regions`);
  return `${parts.join(", ")}. Operators, concentration, momentum, pipeline, connectivity, power context and coverage for the ${m.name} market — every figure sourced.`;
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const r = await getMetro(slug);
  if (!r.ok) return r.status === 404 ? NOT_FOUND_METADATA : { title: "Market" };
  return pageMetadata({ title: `Data Centers in ${r.data.name}`, description: describe(r.data), path: routes.market(r.data.slug) });
}

const CONSTRAINT_LABEL: Record<MetroDetail["constraints"][number]["kind"], string> = { power: "Power", land: "Land", water: "Water", moratorium: "Moratorium", grid: "Grid" };

function Mw({ mw, estimate }: { mw: number | null | undefined; estimate?: boolean }) {
  const s = splitMw(mw);
  if (!s) return <span className="text-ink-4">—</span>;
  return (
    <>
      {estimate && <EstimateMark className="mr-0.5 text-[0.6em]" />}
      {s.value}
    </>
  );
}
const unitOf = (mw: number | null | undefined) => splitMw(mw)?.unit ?? undefined;

export default async function MarketPage({ params, searchParams }: Props) {
  const [{ slug }, sp] = await Promise.all([params, searchParams]);
  const fPage = parseFPage(sp.fPage);
  const [r, { map }] = await Promise.all([getMetro(slug, fPage), countrySlugMap()]);
  if (!r.ok && r.status === 404) notFound();
  if (!r.ok) {
    return (
      <Page className="py-6">
        <OfflineNotice detail={r.error} className="mb-4" />
        <ErrorState />
      </Page>
    );
  }
  const m = r.data;
  const meta = (r.meta ?? {}) as DetailFacilitiesMeta;
  const facTotal = meta.facilitiesTotal ?? m.facilityCount;
  const facPage = meta.facilitiesPage ?? fPage;
  const facPer = meta.facilitiesPerPage ?? 50;
  const pipe = pipelineMw(m);
  const cHref = countryHref(map, m.countryIso2);
  const base = routes.market(m.slug);
  const aiFacilities = m.aiFacilities ?? [];
  const gridConstraints = m.gridConstraints ?? [];
  const claims = m.claims ?? [];
  const openingTimeline = m.openingTimeline ?? [];
  const aiCount = m.aiCount ?? aiFacilities.length;

  const statusData: Partial<Record<FacilityStatus, number>> = {};
  if (m.operationalCount) statusData.operational = m.operationalCount;
  if (m.constructionCount) statusData.under_construction = m.constructionCount;
  if (m.plannedCount) statusData.announced = m.plannedCount;
  const other = m.facilityCount - m.operationalCount - m.constructionCount - m.plannedCount;
  if (other > 0) statusData.unknown = other;

  const hasCloud = m.cloudProviders.length > 0 || m.cloudRegions.length > 0;
  const powerItems = gridConstraints.length + m.constraints.length;
  const sections = [
    { id: "map", label: "Map" },
    { id: "status", label: "Status" },
    { id: "operators", label: "Operators", count: m.operators.length },
    { id: "pipeline", label: "Pipeline" },
    { id: "openings", label: "Openings" },
    { id: "concentration", label: "Concentration" },
    { id: "momentum", label: "Momentum" },
    { id: "connectivity", label: "Connectivity" },
    { id: "power", label: "Power" },
    { id: "coverage", label: "Coverage" },
    { id: "ai", label: "AI", count: aiFacilities.length },
    { id: "projects", label: "Projects", count: m.projects.length },
    { id: "changes", label: "Changes", count: m.recentEvents.length },
    { id: "facilities", label: "Facilities", count: facTotal },
    { id: "claims", label: "Claims", count: claims.length },
  ];

  const jsonLd = compactJsonLd({
    "@context": "https://schema.org",
    "@type": "Place",
    name: `${m.name} data center market`,
    url: `${routes.market(m.slug)}`,
    address: { "@type": "PostalAddress", addressLocality: m.name, addressRegion: m.regionName ?? undefined, addressCountry: m.countryIso2 },
    geo: { "@type": "GeoCoordinates", latitude: m.lat, longitude: m.lng },
    description: describe(m),
  });

  const topOps = [...m.operators].sort((a, b) => b.facilityCount - a.facilityCount).slice(0, 15);
  const opsTotalFac = m.facilityCount || 1;

  return (
    <Page>
      <Breadcrumbs items={[{ name: "Data centers", href: routes.datacenters() }, { name: "Markets", href: routes.markets() }, { name: m.name, href: base }]} className="pt-3" />
      <JsonLd data={jsonLd} />

      <header className="py-5 sm:py-7">
        <div className="flex flex-wrap items-start justify-between gap-3">
          <div className="min-w-0">
            <div className="label-caps mb-1.5">Market</div>
            <h1 className="text-[22px] font-semibold leading-tight tracking-[-0.02em] text-ink sm:text-[28px]">Data centers in {m.name}</h1>
            <div className="mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-[13px] text-ink-2">
              <CountryFlag iso2={m.countryIso2} size={13} />
              {cHref ? (
                <Link href={cHref} className="text-ink hover:text-accent hover:underline">
                  {m.countryName ?? m.countryIso2}
                </Link>
              ) : (
                <span>{m.countryName ?? m.countryIso2}</span>
              )}
              {m.regionName && m.regionName !== m.name && (
                <>
                  <span aria-hidden className="text-ink-4">
                    ·
                  </span>
                  <span className="text-ink-3">{m.regionName}</span>
                </>
              )}
              <span aria-hidden className="text-ink-4">
                ·
              </span>
              <span className="figure text-[12px] text-ink-3">
                {m.lat.toFixed(2)}, {m.lng.toFixed(2)}
              </span>
            </div>
          </div>
          <div className="flex flex-wrap items-center gap-2">
            <WatchButton entityType="metro" slug={m.slug} entityId={m.id} name={m.name} />
            <PillLink href={routes.explore(`entity=facilities&metro=${m.slug}`)}>Explore →</PillLink>
          </div>
        </div>
        {m.description && <p className="mt-2 max-w-2xl text-[13.5px] text-ink-2">{m.description}</p>}
        {m.aliases.length > 0 && (
          <div className="mt-3">
            <div className="label-caps mb-1.5">Sub-markets</div>
            <div className="flex flex-wrap gap-1">
              {m.aliases.slice(0, 8).map((a) => (
                <Badge key={a} tone="outline" size="xs">
                  {a}
                </Badge>
              ))}
              {m.aliases.length > 8 && (
                <details className="inline">
                  <summary className="inline-flex h-[18px] cursor-pointer list-none items-center rounded-xs border border-hair-2 px-1.5 text-[10.5px] font-medium text-ink-3 hover:text-ink [&::-webkit-details-marker]:hidden">+{m.aliases.length - 8} more</summary>
                  <span className="mt-1 flex flex-wrap gap-1">
                    {m.aliases.slice(8).map((a) => (
                      <Badge key={a} tone="outline" size="xs">
                        {a}
                      </Badge>
                    ))}
                  </span>
                </details>
              )}
            </div>
          </div>
        )}
      </header>

      <MetricRow cols={4}>
        <MetricCell>
          <Metric value={fmtInt(m.facilityCount)} label="Facilities" note={`${fmtInt(m.operationalCount)} operational`} size="sm" />
        </MetricCell>
        <MetricCell>
          <Metric value={fmtInt(m.operatorCount)} label="Operators" size="sm" />
        </MetricCell>
        <MetricCell>
          <Metric value={<Mw mw={m.knownMw} />} unit={unitOf(m.knownMw)} label="Known MW" note={<CoverageBar value={m.mwCoverage ?? null} label="MW coverage" width="w-full max-w-[140px]" />} size="sm" />
        </MetricCell>
        <MetricCell>
          <Metric value={<Mw mw={pipe} estimate />} unit={unitOf(pipe)} label="Pipeline MW" note={pipe === null ? `${fmtInt(m.constructionCount + m.plannedCount)} ${pluralize(m.constructionCount + m.plannedCount, "site")}, MW not published` : `${fmtInt(m.constructionCount)} under construction · ${fmtInt(m.plannedCount)} planned`} size="sm" />
        </MetricCell>
        <MetricCell>
          <Metric value={fmtInt(m.cloudRegionCount)} label="Cloud regions" size="sm" />
        </MetricCell>
        <MetricCell>
          <Metric value={fmtInt(m.ixpCount)} label="IXPs" size="sm" />
        </MetricCell>
        <MetricCell>
          <Metric value={fmtInt(aiCount)} label="AI / HPC sites" note="confirmed + likely evidence" size="sm" />
        </MetricCell>
        <MetricCell>
          <Metric value={fmtInt(m.projectCount)} label="Projects" note={m.projectPlannedMw ? `≈ ${fmtMw(m.projectPlannedMw)} planned` : undefined} size="sm" />
        </MetricCell>
      </MetricRow>

      {m.rankings.length > 0 && (
        <div className="-mx-3 flex gap-1.5 overflow-x-auto px-3 py-3 no-scrollbar sm:mx-0 sm:flex-wrap sm:px-0" aria-label="Ranking positions">
          {m.rankings.map((rk) => (
            <Link key={rk.key} href={routes.ranking(rk.key)} className="inline-flex h-10 shrink-0 items-center gap-1.5 rounded-xs border border-hair bg-surface px-2 text-[12px] text-ink-2 hover:border-hair-2 hover:text-ink sm:h-7">
              <span className="figure font-medium text-ink">#{rk.rank}</span>
              <span className="figure text-ink-4">/ {rk.total}</span>
              <span>{rk.label}</span>
            </Link>
          ))}
        </div>
      )}

      <SectionNav items={sections} className="mt-2" />

      <div className="flex flex-col gap-8 pt-6">
        <Section id="map" title="Map" description="Facilities in and around the market; the view opens the interactive map filtered to the country." className="scroll-mt-28">
          <EntityMap center={{ lat: m.lat, lng: m.lng }} zoom={9} filters={{ country: m.countryIso2 }} openLabel={`Open ${m.name} in map`} className="h-[240px] sm:h-[360px]" />
        </Section>

        <Section id="status" title="Status" description="Facilities by lifecycle status." className="scroll-mt-28">
          <StackedBar data={statusData} total={m.facilityCount} />
        </Section>

        <Section id="operators" title="Top operators" description="By facilities operated in this market; share of the market's facility count." className="scroll-mt-28" aside={<span className="figure text-[12px] text-ink-3">{fmtInt(m.operatorCount)} total</span>}>
          {topOps.length ? <ShareList items={topOps.map((o) => ({ key: o.id, label: o.name, href: routes.operator(o.slug), count: o.facilityCount, share: o.facilityCount / opsTotalFac, mw: o.knownMw ?? null }))} unit="facilities" /> : <HonestEmpty title="No operator attributed yet" />}
        </Section>

        <Section id="pipeline" title="Construction pipeline" description="Facilities by lifecycle bucket with the MW they publish, then project records by stage." className="scroll-mt-28" aside={<Link href={routes.projects(`metro=${m.slug}`)} className="text-[12px] text-ink-3 hover:text-ink">All projects →</Link>}>
          {m.pipeline ? <PipelineBars pipeline={m.pipeline} /> : <HonestEmpty title="Pipeline breakdown unavailable" />}
          <PublishedOnlyNote className="mt-3" />
        </Section>

        <Section id="openings" title="Opening timeline" description="Facilities opened per published opening year." className="scroll-mt-28">
          {openingTimeline.length ? (
            <OpeningTimeline data={openingTimeline} />
          ) : (
            <HonestEmpty title="No published opening dates for this market" detail="operators and registries indexed here have not published when their facilities opened; nothing is estimated" />
          )}
          {m.growth.length >= 2 && (
            <div className="mt-5">
              <div className="label-caps mb-2">Cumulative growth</div>
              <GrowthChart data={m.growth} />
            </div>
          )}
        </Section>

        <Section id="concentration" title="Market concentration" description="Herfindahl–Hirschman index and top-operator shares — on facility counts and, separately, on known MW." className="scroll-mt-28">
          {m.concentration ? <MarketConcentrationPanel c={m.concentration} facilityCount={m.facilityCount} /> : <HonestEmpty title="Concentration not computed" />}
        </Section>

        <Section id="momentum" title="Market momentum" description="Separate, transparent components over the last 12 months. There is no composite score: each count stands on its own and links to its evidence." className="scroll-mt-28">
          {m.momentum ? <MarketMomentumPanel m={m.momentum} metroSlug={m.slug} countryIso2={m.countryIso2} /> : <HonestEmpty title="Momentum not computed" />}
        </Section>

        <Section id="connectivity" title="Connectivity" description="Public cloud regions associated with this market and internet exchanges present in its facilities." className="scroll-mt-28" aside={<Link href={routes.connectivity()} className="text-[12px] text-ink-3 hover:text-ink">Connectivity index →</Link>}>
          {hasCloud ? (
            <div className="mb-5">
              <div className="label-caps mb-2">Cloud</div>
              {m.cloudProviders.length > 0 && (
                <ul className="mb-3 flex flex-wrap gap-1.5">
                  {m.cloudProviders.map((p) => (
                    <li key={p.id}>
                      <Link href={routes.operator(p.slug)} className="inline-flex h-10 items-center gap-1.5 rounded-xs border border-hair bg-surface px-2 text-[12.5px] text-ink hover:border-hair-2 hover:text-accent sm:h-8">
                        {p.name}
                        <span className="figure text-[11px] text-ink-3">
                          {p.regionCount} {p.regionCount === 1 ? "region" : "regions"}
                        </span>
                      </Link>
                    </li>
                  ))}
                </ul>
              )}
              {m.cloudRegions.length > 0 && (
                <Table dense mobileCollapse={{ total: m.cloudRegions.length, label: "cloud regions" }}>
                  <THead>
                    <tr>
                      <Th>Region</Th>
                      <Th className="hidden sm:table-cell">Provider</Th>
                      <Th className="hidden md:table-cell">Code</Th>
                      <Th numeric>AZs</Th>
                      <Th>Status</Th>
                      <Th className="hidden lg:table-cell">Launched</Th>
                    </tr>
                  </THead>
                  <TBody>
                    {m.cloudRegions.map((cr) => (
                      <Tr key={cr.id}>
                        <Td primary>
                          <RowLink href={routes.cloudRegion(cr.slug)}>{cr.name}</RowLink>
                          <div className="text-[11.5px] text-ink-3 sm:hidden">
                            {cr.provider.name} · <span className="figure">{cr.code}</span>
                          </div>
                        </Td>
                        <Td label="Provider" className="hidden sm:table-cell">
                          <Link href={routes.operator(cr.provider.slug)} className="text-ink-2 hover:text-ink hover:underline">
                            {cr.provider.name}
                          </Link>
                        </Td>
                        <Td label="Code" className="figure hidden text-[12px] md:table-cell">
                          {cr.code}
                        </Td>
                        <Td label="AZs" numeric>
                          {cr.availabilityZones ?? <span className="text-ink-4">—</span>}
                        </Td>
                        <Td label="Status">
                          <span className="inline-flex flex-wrap gap-1">
                            <Badge tone={cr.status === "operational" ? "ok" : cr.status === "announced" ? "info" : "neutral"} size="xs">
                              {cr.status}
                            </Badge>
                            {cr.isSovereign && (
                              <Badge tone="outline" size="xs" title="Sovereign cloud region">
                                Sovereign
                              </Badge>
                            )}
                          </span>
                        </Td>
                        <Td label="Launched" className="figure hidden text-[12px] text-ink-3 lg:table-cell">
                          {fmtDate(cr.launchedOn)}
                        </Td>
                      </Tr>
                    ))}
                  </TBody>
                </Table>
              )}
              <p className="mt-1.5 text-[11px] text-ink-4">Cloud regions are associated with the market, not hosted at a specific facility unless a source says so.</p>
            </div>
          ) : (
            <HonestEmpty title="No public cloud region associated with this market" className="mb-5" />
          )}
          <div className="label-caps mb-2">Internet exchanges</div>
          {m.ixps.length ? (
            <ul className="divide-y divide-hair">
              {m.ixps.map((x) => (
                <li key={x.id} className="flex items-baseline justify-between gap-3 py-2">
                  <Link href={routes.ixp(x.slug)} className="text-[13.5px] font-medium text-ink hover:text-accent hover:underline">
                    {x.name}
                  </Link>
                  <span className="figure shrink-0 text-[12px] text-ink-3">{x.networkCount === null ? "networks —" : `${fmtInt(x.networkCount)} networks`}</span>
                </li>
              ))}
            </ul>
          ) : (
            <HonestEmpty title="No IXP presence recorded in this market" detail="IXP presence comes from published IXP ↔ facility links; none is inferred" />
          )}
        </Section>

        <Section id="power" title="Power context" description="Grid constraints, utility events and power agreements affecting this market." className="scroll-mt-28" aside={<Link href={routes.power()} className="text-[12px] text-ink-3 hover:text-ink">Power & grid →</Link>}>
          <GridConstraintList items={gridConstraints} showPlace={false} />
          {m.constraints.length > 0 && (
            <div className="mt-4">
              <div className="label-caps mb-1.5">Constraint mentions in indexed sources</div>
              <ul className="divide-y divide-hair">
                {m.constraints.map((c, i) => (
                  <li key={i} className="py-2.5">
                    <div className="flex flex-wrap items-center gap-2">
                      <Badge tone={c.kind === "moratorium" || c.kind === "power" ? "warn" : "outline"} size="xs">
                        {CONSTRAINT_LABEL[c.kind]}
                      </Badge>
                      {c.date && (
                        <time className="figure text-[11.5px] text-ink-3" dateTime={c.date}>
                          {fmtDate(c.date)}
                        </time>
                      )}
                    </div>
                    <p className="mt-1 text-[13px] text-ink-2">{c.summary}</p>
                    <a href={c.url} target="_blank" rel="noopener noreferrer" className="mt-1 inline-flex min-h-6 items-center gap-1 text-[11.5px] text-ink-3 hover:text-accent">
                      {c.sourceName} <ExternalLink className="size-3" />
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          )}
          <ApiNote label="Reading" className="mt-3" note={`Observed events and curated public reports only — nothing is inferred${powerItems === 0 ? "; the absence of items means no report was indexed, not that the grid is unconstrained" : ""}. Utility and grid MW are supply-side figures, never IT load.`} />
        </Section>

        <Section id="coverage" title="Coverage" description="How much of this market the index actually knows — shown so the figures above can be read honestly." className="scroll-mt-28" aside={<Link href={routes.coverage()} className="text-[12px] text-ink-3 hover:text-ink">Coverage report →</Link>}>
          {m.coverage ? <CoverageStrip row={m.coverage} /> : <HonestEmpty title="Coverage not computed" />}
        </Section>

        {aiFacilities.length > 0 && (
          <Section id="ai" title="AI / HPC facilities" description="Facilities with confirmed or likely AI evidence in this market." className="scroll-mt-28" aside={<Link href={routes.ai()} className="text-[12px] text-ink-3 hover:text-ink">AI infrastructure →</Link>}>
            <FacilityTable items={aiFacilities} columns={["operator", "status", "mw", "type"]} />
          </Section>
        )}

        {m.projects.length > 0 && (
          <Section id="projects" title="Projects" description="Announced, permitted and under-construction projects linked to this market." className="scroll-mt-28" aside={<Link href={routes.projects(`metro=${m.slug}`)} className="text-[12px] text-ink-3 hover:text-ink">All projects →</Link>}>
            <ProjectList items={m.projects} />
          </Section>
        )}

        {m.recentEvents.length > 0 && (
          <Section id="changes" title="Recent changes" description="Detected changes on facilities and projects in this market." className="scroll-mt-28" aside={<Link href={routes.live(`metro=${m.slug}`)} className="text-[12px] text-ink-3 hover:text-ink">Live feed →</Link>}>
            <EventList events={m.recentEvents} dense />
          </Section>
        )}

        <Section id="facilities" title="Facilities" description="Sorted by best known capacity (IT, total or ≈ planned)." className="scroll-mt-28" aside={<span className="figure text-[12px] text-ink-3">{fmtInt(facTotal)}</span>}>
          <PagedFacilities items={m.facilities} total={facTotal} page={facPage} perPage={facPer} hrefFor={(p) => fPageHref(base, sp, p)} columns={["operator", "status", "mw", "type", "confidence"]} emptyTitle="No facilities indexed in this market yet" />
        </Section>

        {claims.length > 0 && (
          <Section id="claims" title="Claims about this market" description="Figures asserted about the market itself (metro-scoped) — shown as evidence, never summed into facility totals." className="scroll-mt-28">
            <ClaimsTable claims={claims} kind="all" />
          </Section>
        )}
      </div>

      <SourcesFooter sources={r.sources} note={pipe === null && m.knownMw === null ? "No MW figure has been published by the sources indexed for this market; counts are exact, capacities are shown only when a source publishes them." : undefined} />
    </Page>
  );
}